<template>
  <div class="left-item">
    <div class="grid-item aa">
      <videoBigBox :num="num" :modelObject="alarmList[current]"></videoBigBox>
    </div>
    <div class="grid-item bb ">
      <h3 class="alert-title">
        报警等级
        <img src="../assets/icon-3.png" alt="" />
      </h3>
      <div class="alert-container alert-container-item1">
        <img class="alert-icon" src="../assets/icon-4.png" alt="" />
        <span class="alert-icon-text">{{ alarmList[current].class }}级</span>
      </div>
    </div>
    <div class="grid-item cc ">
      <h3 class="alert-title">
        感知类型
        <img src="../assets/icon-3.png" alt="" />
      </h3>
      <div class="alert-container">
        <div class="type-img">
          {{ alarmList[current].type }}
        </div>
      </div>
    </div>
    <div class="grid-item dd ">
      <h3 class="alert-title">
        处置预案
        <img src="../assets/icon-3.png" alt="" />
      </h3>
      <div class="alert-container">
        <p class="alert-text">
          {{ alarmList[current].plan_msg }}
        </p>
      </div>
    </div>
    <div class="grid-item ee ">
      <ul class="alert-ul">
        <li v-for="(item, index) in alarmList" :key="item.id">
          <el-button
            size="small"
            class="btn"
            :type="index === current ? 'primary' : ''"
          >
            {{ item.pos }} ID:{{ item.camera_id }}
          </el-button>
        </li>
        <li>
          <span>共{{ alarmList.length }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import videoBigBox from '../components/video-big';
export default {
  components: {
    videoBigBox
  },
  props: {
    alarmList: Array
  },
  data() {
    return {
      current: 0, // 当前接活选项
      timer: '',
      num: 5
    };
  },
  mounted() {
    clearInterval(this.timer);
    // 5 秒倒计时
    this.timer = setInterval(() => {
      this.num--;
      if (this.num < 0) {
        if (this.current >= this.alarmList.length - 1) {
          clearInterval(this.timer);
          this.$emit('closeDetails');
        } else {
          this.num = 5;
          this.current++;
        }
      }
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.grid-item {
  font-size: 20px;
  background: #121626;
}
.left-item {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  grid-template-rows: 4fr 206px 44px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas:
    'aa aa aa '
    'bb cc dd '
    'ee ee ee';
}
.right-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.aa {
  grid-area: aa;
}
.bb {
  grid-area: bb;
}
.cc {
  grid-area: cc;
}
.dd {
  grid-area: dd;
}
.ee {
  grid-area: ee;
  overflow: hidden;
}
.alert-ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;
  padding: 7px 10px 0 7px;
  li {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
  }
}
.alert-title {
  padding: 0 0 0 20px;
  margin: 0;
  line-height: 44px;
  font-size: 16px;
  text-align: left;
  font-weight: normal;
  border-bottom: 1px solid #29304d;
  img {
    margin-left: 10px;
  }
}
.alert-container {
  padding: 0px 20px;
  .alert-text {
    text-align: left;
    font-size: 16px;
    line-height: 32px;
  }
  .alert-icon {
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 10px;
  }
  .alert-icon-text {
    position: relative;
    top: 10px;
  }
}
.alert-container-item1 {
  padding-top: 24px;
}
::v-deep .el-button {
  background: #121626;
  border: 1px solid #29304d;
}
::v-deep .el-button--primary {
  background: #333fff;
}
.type-img {
  background: url('../assets/icon-5.png') no-repeat -10px -4px;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  color: #fff;
  margin: 40px auto 0;
}
.btn {
  background: #121626;
  color: #fff;
}
</style>
<style>
.el-button--primary {
  background: #333fff !important;
}
</style>
